
<?php 
echo link_to_remote('', array('update' => 'list_component', 
  'url' => 'component/listAjax', 
  'loading' => visual_effect('appear', 'indicator'),
  'complete' => visual_effect('fade', 'indicator'). visual_effect('highlight', 'list_component'),
  'position' => 'bottom',
));
?>

<div id="sf_admin_bar">

<div class="sf_admin_filters">

  <fieldset>
    <h2>Filters</h2>

    <div class="form-row">
    <label for="filters_alert_date">Description:</label>
    <div class="content">
        <input type="text" name="description" id="description" />
        <input type="hidden" name="category" id="category"  value="<? echo $category ?>" />
    </div>
    </div>
    
    <div class="form-row">
    <label for="filters_alert_date">Product Code:</label>
    <div class="content">
        <input type="text" name="productcode" id="productcode" />
    </div>
    </div>

   </fieldset>

	  <ul class="sf_admin_actions">    
	    <li><input type="button" name="filter" value="Filter" class="sf_admin_action_filter"  onclick="changeList()" /></li>
	  </ul>
	  
    <div id="indicator" style="display: none">Loading...</div>

    
</div>
</div>  	    
       <div id ="list_component">    
          <table id ='ListOfComponents' "cellspacing="0" class="sf_admin_list">            
            <thead>
            <tr>
                  <th id="sf_admin_list_th_productcode" width="25%">Product Code
                          </th>
                  <th id="sf_admin_list_th_description" width="35%">Description
                          </th>
                  <th id="sf_admin_list_th_description" width="20%">Brand
                          </th>       
                  <th id="sf_admin_list_th_description" width="10%">Unit
                          </th>
                  <th id="sf_admin_list_th_description" width="10%">Add
                          </th>
            </tr>
            </thead>            
          </table>
       </div>
            
           
    
    <ul class="sf_admin_actions">    
	    <li><input type="button" name="Add Components" value="Add Components" class="sf_admin_action_filter"  onclick="addComponents()" /></li>
	    <input type="hidden" name="componentCount" id="componentCount"  value="0" />
    </ul>

<table id ='added_components' "cellspacing="0" class="sf_admin_list">
<thead>
<tr>
      <th id="sf_admin_list_th_productcode" width="25%">Product Code
              </th>
      <th id="sf_admin_list_th_description" width="35%">Description
              </th>
      <th id="sf_admin_list_th_description" width="5%">Brand
              </th>       
      <th id="sf_admin_list_th_description" width="5%">Unit
              </th>
      <?php foreach ($titles as $title) { ?>
            <th id="sf_admin_list_th_description"><?php echo $title ?></th>
      <?php } ?>
      <th id="sf_admin_list_th_description" width="5%">Action
              </th>
</tr>
</thead>
<!--show component here-->
</table>

<script type="text/javascript">

function changeList(){
    var description=document.getElementById("description").value;
    var productcode=document.getElementById("productcode").value;
    var category = document.getElementById("category").value;
    var link = '<?php echo url_for('component/listAjax') ?>';
    new Ajax.Updater('list_component', link + '?description='+ description + '&productcode=' + productcode + '&category=' + category, {asynchronous:true, evalScripts:false, onComplete:function(request, json){new Effect.Fade('indicator', {});new Effect.Highlight('list_component', {});}, onLoading:function(request, json){new Effect.Appear('indicator', {});}});  
    }
function addComponents()
{
    var components = $$(".ChkboxComponents");        
    var existComponents = $$(".ExistComponents");            
    var count = existComponents.length;
    var newRows = $("added_components").innerHTML;
    
    for (var i =0; i< components.length ; i++ ){
        if (components[i].checked){
            var component = components[i];            
            var rowId = component.attributes['rowId'].value;
            var bExist = false;
            for (var j =0; j< existComponents.length; j++)
                if (rowId== existComponents[j].value){
                    bExist = true;
                    break;
                }
            if (!bExist) {            
                var oddRow=count % 2;
                var productCode='<td>' + $("productCode_"+ rowId).value + '</td>';          
                var description='<td>'+ $("description_"+ rowId).value + '</td>';          
                var brand='<td>' + $("brand_"+ rowId ).value + '</td>';  
                var unit='<td>' + $("unit_"+ rowId ).value + '</td>';
                var rowIds = '<input type="hidden" name="rowIds[]" id ="rowIds"  class = "ExistComponents" value="' + rowId+ '"/>' ;                         
                var action = '<td><ul class="sf_admin_td_actions"><li>' + '<?php echo  image_tag(sfConfig::get('sf_admin_web_dir').'/images/delete_icon.png', array('align' => 'absmiddle', 'alt' => 'delete', 'title' =>'delete', 'onclick' => 'removeComponent(ROWID, "added_components", ".ExistComponents")', 'onmouseover'=>'this.style.cursor="pointer"') ); ?>' +  '</li></ul></td>';
                action = action.replace("ROWID", rowId);
                
                var suppliedByClient = '<td><input type="checkbox" name="suppliedByClients[]" value="' + count + '"  ></td>';
                var qty='<td><input type="text" name="qtys[]" id="qtys" size="5" /></td>';
                
                newRows= newRows+ '<tr class="sf_admin_row_' + oddRow + '">' 
                  + rowIds+  productCode + description+ brand + unit+ qty + suppliedByClient +action+  
                  '</tr>';
                ++count;          
            }                       
        }
        
    }
    //remove component  row after add to exist
    var componentList = $("ListOfComponents");
    var j=0;
    for (var i =0; i< components.length ;  i++){
        if (components[i].checked){
            var component = components[i];            
            var rowId = component.attributes['rowId'].value;
             componentList.deleteRow(i+1 - j);
             j++;
        }
    }
    //change classname, begin from 1 because there is a row with thead title
    for (var i =1; i< componentList.rows.length; i++)    {
        componentList.rows[i].className='sf_admin_row_'+ (i+1)%2;
    }
    
    //update table
    document.getElementById("added_components").innerHTML = newRows;  
}

function removeComponent(rowId, tableId, classId){
    var existComponents = $$(classId);
    var components = $(tableId);
    
    for (var i =0; i < existComponents.length; i++){
        if (rowId == existComponents[i].value){
            components.deleteRow(i+1);
            break;
        }        
    }
    //because there is a row with thead title
    for (var i =1; i< components.rows.length; i++)    {
        components.rows[i].className='sf_admin_row_'+ (i+1)%2;
    }
}
</script>
  
